<template>
  <div class="detail">
    <div class="img-content">
      <img :src="info.banner_pic" alt="">
    </div>
    <div class="content2">
      <p>案例>{{info.category_title}}>
        <span>{{info.title}}</span>
      </p>
    </div>
    <!-- <div class="desc-content">
      <h3>{{info.title}}</h3>
      <div class="img-content">
        <img :src="el" alt="" v-for="(el,index) in info.pc_pic" :key="index">
      </div>
      <p>{{info.description}}
      </p>
    </div> -->
    <div class="img-detail">
      <div class="pc-img">
        <img :src="el" alt="" v-for="(el,index) in info.pc_pic" :key="index">
      </div>
      <div class="min-img">
        <img :src="el" alt="" v-for="(el,index) in info.wap_pic" :key="index">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["info"],
  data() {
    return {
      info: {}
    };
  },
  watch: {
    id(val) {}
  },
  methods: {
    getInfo() {
      let data = {
        id: this.id
      };
      this.$axios
        .get("/api/slideshow.php", { params: { order: "add_time" } })
        .then(res => {
          this.swiperSlides = res.data.result.data.data || [];
        });
    }
  }
};
</script>

<style lang='less' scoped>
.detail {
  .img-content {
    margin: auto;
    width: 100%;
    // @media (min-width: 976px) {
    //   width: 60%;
    // }
    // @media (min-width: 1200px) {
    //   width: 50%;
    // }
    img {
      width: 100%;
    }
  }
  .content2 {
    font-size: 15px;
    padding: 10px;
    text-align: left;
    margin-left: 100px;
    p {
      color: #999;
      span {
        color: #333;
      }
    }
  }
  .desc-content {
    h3 {
      font-size: 28px;
      margin: 30px 0 70px 0;
    }
    .img-content {
      width: 100px;
      margin: 30px auto;
      img {
        width: 100%;
      }
    }
    p {
      max-width: 90%;
      @media (min-width: 976px) {
        max-width: 60%;
      }
      @media (min-width: 1200px) {
        max-width: 50%;
      }
      margin: 20px auto 80px;
    }
  }
  .img-detail {
    width: 100%;
    margin: auto;
    min-height: calc(100vh - 425px);
    .min-img {
      display: block;
      @media (min-width: 976px) {
        display: none;
        visibility: hidden;
      }
    }
    .pc-img {
      display: none;
      visibility: hidden;
      @media (min-width: 976px) {
        display: block;
      }
    }
    @media (min-width: 976px) {
      width: 60%;
    }
    @media (min-width: 1200px) {
      width: 50%;
    }
    img {
      width: 100%;
    }
  }
}
</style>
